<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>资源分类</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showaddclass">添加分类</el-button>
      </div>
      <div>
        <!-- 主体区域 -->
        <el-table :data="categorieslist" border stripe>
          <el-table-column type="index" label="#">
          </el-table-column>
          <el-table-column label="图标" width="100">
            <template slot-scope="scope">
              <i style="font-size: 20px;" :class="scope.row.className"></i>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="分类名称">
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <div>{{scope.row.createAt|dateFormat}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="showModifyDialog(scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="deletecategories(scope.row._id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!----------------- 添加分类对话框 ----------------->
    <el-dialog title="添加资源分类" :visible.sync="addClassificationDialogVisible" width="50%" @close="addClassificationDialog">
      <div class="addclass_main">
        <el-form label-position="top" :model="addclassification" :rules="addclassRules" ref="addClassRuleForm" label-width="80px" :hide-required-asterisk="true" class="demo-ruleForm">
          <el-form-item label="图标：" prop="className">
            <el-select v-model="addclassification.className" placeholder="请选择图标">
              <el-option v-for="(firstItem,i) in classicon" :label="firstItem.iconName" :value="firstItem.iconClass" :key="i">
                <span style="float: left;padding-left:20px;font-size: 18px"><i :class="firstItem.iconClass"></i></span>
                <span style="padding-left:60px;font-size: 16px">{{firstItem.iconName}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类名称：" prop="title">
            <el-input v-model="addclassification.title"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addClassificationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addclass">确 定</el-button>
      </div>
    </el-dialog>
    <!----------------- 修改分类对话框 ----------------->
    <el-dialog title="修改资源分类" :visible.sync="modifycgDialogVisible" width="50%" @close="modifycgDialog">
      <div class="modifycg_main">
        <el-form label-position="top" :model="modifycategories" :rules="modifycgRules" ref="modifycgRuleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="图标：" prop="className">
            <el-select v-model="modifycategories.className" placeholder="请选择图标">
              <el-option v-for="(firstItem,i) in classicon" :label="firstItem.iconName" :value="firstItem.iconClass" :key="i">
                <span style="float: left;padding-left:20px;font-size: 18px"><i :class="firstItem.iconClass"></i></span>
                <span style="padding-left:60px;font-size: 16px">{{firstItem.iconName}}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类名称：" prop="title">
            <el-input v-model="modifycategories.title"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifycgDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifycg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分类列表
      categorieslist: [],
      classicon: [
        { iconClass: 'el-icon-video-camera-solid', iconName: '影像' }, { iconClass: 'el-icon-camera-solid', iconName: '摄影' },
        { iconClass: 'el-icon-picture', iconName: '图片' }, { iconClass: 'el-icon-collection', iconName: '书籍' },
        { iconClass: 'el-icon-notebook-1', iconName: '笔记' }, { iconClass: 'el-icon-cpu', iconName: '硬件' },
        { iconClass: 'el-icon-mobile-phone', iconName: '电子设备' }, { iconClass: 'el-icon-basketball', iconName: '体育' },
        { iconClass: 'el-icon-male', iconName: '男生' }, { iconClass: 'el-icon-female', iconName: '女生' },
        { iconClass: 'el-icon-headset', iconName: '娱乐' }, { iconClass: 'el-icon-s-platform', iconName: '软件' }
      ],
      // ========添加资源分类功能所需数据=========
      addClassificationDialogVisible: false,
      addclassification: {},
      addclassRules: {
        className: [
          { required: true, message: '请选分类图标', trigger: 'change' }
        ],
        // 分类名称
        title: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // ========修改资源分类功能所需数据=========
      modifycgDialogVisible: false,
      modifycategories: {},
      modifycgRules: {
        className: [
          { required: true, message: '请选分类图标', trigger: 'change' }
        ],
        // 分类名称
        title: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getcategorieslist()
  },
  methods: {
    // 请求分类列表
    async getcategorieslist() {
      const res = await this.$http.get('/categories')
      // console.log(res)
      this.categorieslist = res.data
    },
    // 删除分类
    async deletecategories(uid) {
      const removeInfo = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (removeInfo !== 'confirm') {
        return this.$message({
          showClose: true,
          message: '删除分类操作已取消！',
          type: 'info'
        })
      } else {
        const res = await this.$http.delete('/categories/' + uid)
        if (res.status !== 200) {
          this.$message({
            showClose: true,
            message: '删除分类失败！',
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message: '删除分类成功！',
          type: 'success'
        })
        this.getcategorieslist()
      }
    },
    // ================================================================
    // 添加分类对话框回调
    addClassificationDialog() {
      this.getcategorieslist()
      this.addclassification = {}
    },
    // 显示添加分类对话框
    showaddclass() {
      this.addClassificationDialogVisible = true
    },
    // 添加分类
    addclass() {
      this.$refs.addClassRuleForm.validate(async (valid) => {
        if (!valid) return
        const that = this
        // console.log(this.addclassification)
        const formdata = this.$qs.stringify(this.addclassification)
        // console.log(formdata)
        await this.$http({
          method: 'post',
          url: '/categories',
          data: formdata
        }).then((res) => {
          // console.log(res)
          that.getcategorieslist()
          that.addClassificationDialogVisible = false
          that.$message({
            showClose: true,
            message: '添加分类成功',
            type: 'success'
          })
        }).catch((err) => {
          const messg = err.response.data
          that.$message({
            showClose: true,
            message: messg,
            type: 'error'
          })
        })
      })
    },
    // ================================================================
    // 修改分类对话框回调
    modifycgDialog() {
      this.getcategorieslist()
      this.modifycategories = {}
    },
    // 显示修改分类对话框
    showModifyDialog(data) {
      this.modifycategories = data
      this.modifycgDialogVisible = true
    },
    // 修改分类
    modifycg() {
      this.$refs.modifycgRuleForm.validate(async (valid) => {
        if (!valid) return
        // console.log(this.modifycategories)
        const that = this
        const uid = this.modifycategories._id
        const formdata = this.$qs.stringify(this.modifycategories)
        await this.$http({
          method: 'put',
          url: '/categories/' + uid,
          data: formdata
        }).then((res) => {
          // console.log(res)
          that.getcategorieslist()
          that.modifycgDialogVisible = false
          that.$message({
            showClose: true,
            message: '修改分类成功！',
            type: 'success'
          })
        }).catch((err) => {
          const messg = err.response.data
          that.$message({
            showClose: true,
            message: messg,
            type: 'error'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.addclass_main,.modifycg_main{
  width: 80%;
  margin: 0 auto;
}
</style>
